<template>
	<router-view />
</template>
<script setup>
	// window.addEventListener('visibilitychange', function(e) {
	// 	if (document.visibilityState == "visible") {} else {}
	// });

	window.hFullScreen = () => {
		var element = document.body;
		if (element.requestFullscreen) {
			element.requestFullscreen();
		} else if (element.mozRequestFullScreen) {
			element.mozRequestFullScreen();
		} else if (element.webkitRequestFullscreen) {
			element.webkitRequestFullscreen();
		} else if (element.msRequestFullscreen) {
			element.msRequestFullscreen();
		}
	}

	window.hExitFullscreen = () => {
		if (document.exitFullscreen) {
			document.exitFullscreen();
		} else if (document.mozCancelFullScreen) {
			document.mozCancelFullScreen();
		} else if (document.webkitExitFullscreen) {
			document.webkitExitFullscreen();
		}
	}
</script>
<style lang="scss">
@font-face {
font-family: 'YouSheBiaoTiHei';
src: url('@/assets/fonts/YOUSHEBIAOTIHEI-2.TTF');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DIN1451EF EngNeu';
src: url('@/assets/fonts/DIN1451EF-ENGNEU.OTF');
font-weight: normal;
font-style: normal;
}
	html,
	body,
	#app {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		// background-image: url(/imgs/sbg.png);
		//background-image: url(/imgs/zjbg.png);
		// background-size: auto 100%;
		background-position: bottom;
		background-position-x: 0;
		background-repeat: repeat;
		background-size: 100% 100%;
		font-family: "microsoft yahei";
		font-size: 14px;
		letter-spacing: 1px;
		color: #fff;
	}
	/*
		::-webkit-scrollbar 滚动条整体部分
		::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
		::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
		::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
		::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
		::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
		::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
		*/
	::-webkit-scrollbar-button {
		background-color: transparent;
		width: 0;
		height: 0;
	}

	::-webkit-scrollbar-corner {
		background: transparent;
	}

	::-webkit-scrollbar-thumb {
		background-color: #3880c9cc;
		border-radius: 3px;
	}

	::-webkit-scrollbar-thumb:hover {
		background-color: rgb(0 127 255);
		border-radius: 3px;
	}

	::-webkit-scrollbar-track {
		background-color: #d4d4d410;
	}

	::-webkit-scrollbar {
		width: 10px;
		height: 10px;
	}


	.el-input,
	input:focus,
	input {
		border: none !important;
		box-shadow: none !important;
		outline: none;
		border: none;
	}

	input:-internal-autofill-previewed,
	input:-internal-autofill-selected {
		-webkit-text-fill-color: #eee !important;
		transition: background-color 50000s ease-in-out 0s !important;
		outline: none;
		border: none;
		color: #eee;
	}

	div:has(>.item-plane) {
		padding: 20px 0 20px 20px;
		height: calc(100% - 40px);
		overflow: hidden;
	}

	p {
		margin: 0;
		padding: 0;
	}

	input.act,
	input:hover {
		border: 0;
	}

	body :not(input) {
		user-select: none;
	}


	:root {
		--size-tit: 12px;
		--border-color: #7caffe;
		--color-borer: #cad9f1;
		--t-color: #3b87fd;
--m-head: 0;
		// --m-head: 64px;
		
		--m-footer: 0px;
		--m-body: calc(100% - var(--m-head) - var(--mfooter));
		--m-aside: 310px;
		// --el-aside-width: var(--m-aside);
		--el-aside-width: 510px;
	}


	.irg[type="range"] {
		-webkit-appearance: none;
		appearance: none;
		margin: 0;
		outline: 0;
		background-color: #0c3d72a1;
		width: 75px;
		padding: 0 10px;
		border-radius: 5px;
		height: 30px;
		display: flex;
		align-items: center;
	}

	.irg[type="range"]::-webkit-slider-runnable-track {
		height: 6px;
		//空白区域填充
		background: #20498C;
	}

	.irg[type="range" i]::-webkit-slider-container {
		height: 20px;
		overflow-y: hidden;
	}

	.irg[type="range"]::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: 10px;
		height: 16px;
		border-radius: 5px;
		background-color: #eee; //滑块
		border: 1px solid transparent;
		margin-top: -5px;
		//值区域填充
		border-image: linear-gradient(#5DABF9, #5DABF9) 0 fill / 7 15 7 0 / 0px 0px 0 2000px;
	}

	.el-scrollbar {
		max-height: 600px !important;
		overflow-y: scroll !important;
	}

	.tit_item {
		font-size: 16px;
		color: #eee;
		font-family: unset;
		text-shadow: 0px 0px #eee;
	}

	.num {
		font-size: 18px;
		text-shadow: 0px 0px #eee;
	}

	span.min {
		font-size: 10px;
		margin-left: 2px;
		transform: scale(0.8);
		display: inline-block;
		font-weight: 300;
	}

	//上箭头
	span.up:after {
		content: "↑";
		color: #ce6da2;
	}

	//下箭头
	span.down:after {
		content: "↓";
		color: #29DBB4;
	}

	span.up,
	span.down {
		position: relative;
	}

	span.up:after,
	span.down:after {
		text-shadow: none;
		position: absolute;
		transform: scaleX(1.5);
		bottom: 3px;
		line-height: 18px;
		margin-left: 2px;
	}

	.el-aside {
	// width: 510px;
		width: var(--m-aside);
	}

	.side-left-right {
		height: 100%;
		overflow: hidden;
	}

	.el-iu .el-input__inner {
		background: none;
		color: inherit;
		padding: 0;
	}

	.item-plane {
		padding: 0 0 30px 10px;
		height: calc(100% - 50px);
		display: flex;
		flex-direction: column;
	}

	.sright {
		padding: 20px 20px 20px 0 !important;

		.item-plane {
			padding: 0 10px 30px 0px;
		}
	}


	.font_12 {
		color: #BECDE3;
		font-size: 12px;
	}

	.ibg_stl {

		//rgba(50, 117, 229, 0.52);
		// linear-gradient(180deg, rgba(50, 117, 229, 0.52), rgba(174, 196, 252, 0.52));
		//background: rgb(33 57 95 / 68%);

		background-image: url(/imgs/jsc/bg-a.png);
		background-size: 100% 100%;
		box-shadow: 0px 0px 2px 0px #eee;
		border-radius: 8px;
	}


	.el-divider__text {
		background-color: #f2f3f5 !important;
	}

	.hide {
		display: none;
	}

	.btn {
		cursor: pointer;
		user-select: none;
		transition: all 0.2s;
	}

	.btn:hover {
		transform: scale(1.01);
		z-index: 99999 !important;
		// filter: drop-shadow(1px 1px 1px #333);
	}




	.multiple-rows {
		word-wrap: break-word;

		p {
			text-align: center;
		}
	}

	.circular {
		display: inline;
		height: var(--el-loading-spinner-size);
		width: var(--el-loading-spinner-size);
		-webkit-animation: loading-rotate 2s linear infinite;
		animation: loading-rotate 2s linear infinite;

		.path {
			-webkit-animation: loading-dash 1.5s ease-in-out infinite;
			animation: loading-dash 1.5s ease-in-out infinite;
			stroke-dasharray: 90, 150;
			stroke-dashoffset: 0;
			stroke-width: 2;
			stroke: var(--el-color-primary);
			stroke-linecap: round;
		}
	}

	@keyframes loading-dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}

		50% {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -40px;
		}

		100% {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -120px;
		}
	}

	@keyframes loading-rotate {
		100% {
			transform: rotate(360deg);
		}
	}
</style>